<template>
	<view class="writeOff">
		<view class="goods-info" v-if="detail">
			<image class="goods_img" :src="detail.orderInfoList.image" mode=""></image>
			<view class="">
				<view class="title">{{detail.orderInfoList?detail.orderInfoList.storeName:''}}</view>
				<view class="time">时间：{{detail.orderInfoList?detail.orderInfoList.activityStartTime:''}}</view>
				<view class="other_info">
					<view class="tags">
						<view class="">{{detail.orderInfoList?detail.orderInfoList.sku:''}}</view>
					</view>
					<view class="price">
						<text>￥</text>
						<text class="pirce_val">{{detail.orderInfoList?detail.orderInfoList.price:''}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="order_detail" v-if="detail">
			<view class="item">
				<view class="item-name">订单编号</view>
				<view class="item-val">{{detail.orderId}}</view>
			</view>
			<view class="item">
				<view class="item-name">下单时间</view>
				<view class="item-val">{{detail.payTime}}</view>
			</view>
			<view class="item">
				<view class="item-name">活动时间</view>
				<view class="item-val">{{detail.orderInfoList?detail.orderInfoList.activityStartTime:''}}</view>
			</view>
			<view class="item">
				<view class="item-name">活动地址</view>
				<view class="item-val">{{detail.orderInfoList?detail.orderInfoList.address:''}}</view>
			</view>
			<view class="item">
				<view class="item-name">出行人数</view>
				<view class="item-val">{{detail.orderInfoList?detail.orderInfoList.cartNum:''}}</view>
			</view>
			<view class="item">
				<view class="item-name">出行人员</view>
				<view class="item-val" v-if="detail.orderInfoList">
					<view v-for="(item,index) in detail.orderInfoList.joinerList" :key="item.id">
						<text>{{item.studentName}}</text>
						<text v-if="index<detail.orderInfoList.joinerList.length-1">/</text>
					</view>
					
				</view>
			</view>
		</view>
		<view class="writeOffStatus"  v-if="detail">
			<view class="">核销状态</view>
			<view class="status-val">{{detail.clerkId>0?'已核销':'待核销'}}</view>
		</view>
		<view class="writeOffBtn" v-if="detail&&detail.clerkId==0">
			<view class="" @click="writeOff">确认核销</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderId:'',
				detail: null,
			};
		},
		onLoad(opt) {
			this.orderId = opt.orderId;
			// this.id = e.id;
			this.getDetail();
		},
		methods:{
			async getDetail() {
				const res = await this.$api.get(`order/detail/${this.orderId}`);
				if(res.code == 200) {
					this.detail =res.data;
				}else {
					this.showToast('订单错误');
					setTimeout(v => {
						uni.navigateBack()
					},1500)
				}
			},
			async writeOff(){
				const res = await this.$api.get(`order/code/${this.orderId}`);
				if(res.code == 200) {
					this.showToast('已核销');
					this.getDetail();
				}else {
					this.showToast(res.data);
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F7F7;
	}

	.writeOff {
		padding: 30rpx 26rpx;
		box-sizing: border-box;

		.goods-info {
			display: flex;
			justify-content: space-between;
			background-color: #fff;
			padding: 20rpx 26rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
			margin-bottom: 20rpx;

			.goods_img {
				width: 200rpx;
				height: 160rpx;
				border-radius: 14rpx;
				margin-right: 10rpx;
			}

			>view {
				.title {
					width: 420rpx;
					font-size: 30rpx;
					line-height: 30rpx;
					font-weight: bold;
					color: #1A1A1A;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.time {
					font-size: 24rpx;
					line-height: 24rpx;
					color: #999999;
					padding: 14rpx 0 22rpx;
				}

				.other_info {
					display: flex;
					justify-content: space-between;

					.tags {
						display: flex;
						align-items: center;

						>view {
							font-size: 22rpx;
							line-height: 22rpx;
							padding: 8rpx 12rpx;
							color: #FF8F01;
							background-color: #FFF2E2;
						}

						>view:not(:last-child) {
							margin-right: 20rpx;
						}
					}

					.price {
						font-size: 24rpx;
						font-weight: bold;
						color: #FF0404;

						.pirce_val {
							font-size: 34rpx;
							color: #FF0000;
						}
					}
				}
			}
		}
		.order_detail{
			padding: 0 26rpx;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			.item{
				padding: 40rpx 0;
				display: flex;
				justify-content: space-between;
				.item-name{
					font-size: 26rpx;
					color: #333;
				}
				.item-val{
					font-size: 26rpx;
					color: #999;
				}
			}
		}
		.writeOffStatus{
			padding: 30rpx 26rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			font-size: 30rpx;
			background-color: #fff;
			border-radius: 20rpx;
			.status-val{
				color: #E71313;
			}
		}
		.writeOffBtn{
			width: 100%;
			padding: 0 26rpx 30rpx;
			box-sizing: border-box;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			view{
				width: 100%;
				height: 92rpx;
				background-color: #2E80FE;
				text-align: center;
				line-height: 92rpx;
				font-size: 32rpx;
				color: #fff;
				font-weight: bold;
				border-radius: 20rpx;
			}
		}
	}
</style>